---
import { Image } from 'astro:assets';
import { LinkButton } from '@astrojs/starlight/components';

const { data } = Astro.locals.starlightRoute.entry;
const { title = data.title, tagline, image, actions = [] } = data.hero || {};

const imageAttrs = {
	loading: 'eager' as const,
	decoding: 'async' as const,
	alt: image?.alt || '',
};

let darkImage: ImageMetadata | undefined;
let lightImage: ImageMetadata | undefined;
let rawHtml: string | undefined;
if (image) {
	if ('file' in image) {
		darkImage = image.file;
	} else if ('dark' in image) {
		darkImage = image.dark;
		lightImage = image.light;
	} else {
		rawHtml = image.html;
	}
}
---


<div class="flex flex-row flex-wrap">
	<div class="w-full lg:w-[60%]">
	<!-- {
		darkImage && (
			<Image
				src={darkImage}
				{...imageAttrs}
				class:list={{ 'light:sl-hidden': Boolean(lightImage) }}
			/>
		)
	} -->
	<!-- {lightImage && <Image src={lightImage} 
	 class="dark:sl-hidden w-[700px]" />} -->
	{rawHtml && <div class="w-[600px] lg:w-[700px]" set:html={rawHtml} />}
	</div>
	<div class="flex flex-col w-full lg:w-[40%] lg:order-first justify-center">
		<div class="sl-flex copy">
			<h1 id="_top" data-page-title set:html={title} />
			{tagline && <div class="tagline" set:html={tagline} />}
		</div>
		{
			actions.length > 0 && (
				<div class="sl-flex actions">
					{actions.map(
						({ attrs: { class: className, ...attrs } = {}, icon, link: href, text, variant }) => (
							<LinkButton {href} {variant} icon={icon?.name} class:list={[className]} {...attrs}>
								{text}
								{icon?.html && <Fragment set:html={icon.html} />}
							</LinkButton>
						)
					)}
				</div>
			)
		}
	</div>
</div>

<style>
	@layer starlight.core {
		.hero {
			display: flex !important;
			flex-direction: row;
			align-items: center;
			gap: 1rem;
			padding-bottom: 1rem;
			flex-wrap: wrap;
			justify-content: space-between;
		}

		.stack {
			flex-direction: column;
			gap: clamp(1.5rem, calc(1.5rem + 1vw), 2rem);
			text-align: center;
		}

		.content-area {
			flex: 1;
			min-width: 0;
		}

		.copy {
			flex-direction: column;
			gap: 1rem;
			align-items: center;
		}

		.copy > * {
			max-width: 50ch;
		}

		h1 {
			font-size: clamp(var(--sl-text-3xl), calc(0.25rem + 5vw), var(--sl-text-6xl));
			line-height: 0.9em;
			font-weight: 600;
			color: var(--sl-color-white);
			font-family: var(--sl-font-family-serif);
			letter-spacing: -0.05em;
		}

		.tagline {
			font-size: clamp(var(--sl-text-base), calc(0.0625rem + 2vw), var(--sl-text-xl));
			color: var(--sl-color-gray-2);
			margin-bottom: 1.5rem;
		}

		.actions {
			gap: 1rem 2rem;
			flex-wrap: wrap;
			justify-content: center;
		}

		@media (min-width: 50rem) {
			.hero {
				grid-template-columns: 7fr 4fr;
				gap: 3%;
				padding-block: clamp(2.5rem, calc(1rem + 10vmin), 10rem);
			}

			.hero > img,
			.hero > .hero-html {
				order: 2;
				width: min(100%, 25rem);
			}

			.stack {
				text-align: start;
			}

			.copy {
				align-items: flex-start;
			}

			.actions {
				justify-content: flex-start;
			}
		}
	}
</style>